import React,{Component} from 'react'
import { Scroller,Touchable,List} from '$yo-component'
import yoHistory from '$common/history';
//import axios from 'axios'

import './index.scss'

class ImgList extends Component {
    constructor(props){
        super(props);
        this.state={
            dataSource: this.props.dataSource
        }
    }
    changePage(){
        let page=this.props.pageNum;
        console.log(page);
        // 只要加载，就将 flag改为false
        let flag=false
        this.props.handleFlag(flag);

        if(page<=7){
            page=page+1;
            //console.log(page);
            this.props.modifyPage(page);
        }else{
            return;
        }
    }
    render (){
        // 从父组件传递过来的数据
        let dataSource=this.props.dataSource.length>0 ? this.props.dataSource: null
        return (

                <div className="img-lists">
                    {
                        dataSource ?
                            <List
                                extraClass="yo-list-fullscreen list-height"
                                dataSource={dataSource}
                                ref="list"
                                useLoadMore={true}
                                infinite={true}
                                onLoad={()=>{
                                    setTimeout(() => {
                                        this.changePage();
                                        this.refs.list.stopLoading(this.props.stopFlag);
                                    }, 500);
                                }}
                                renderItem={(item) => {
                                    return (
                                        <Touchable
                                            touchClass={'to-detail'}
                                            onTap={() => {
                                                yoHistory.push('/detail/' + item.id)
                                                //console.log(item.id) 点击项的id
                                            }}
                                        >
                                            <div className="img-item" key={item.id} id="haha">
                                                <img src={item.headImg} alt="" style={{width: '100%', height: '200'}}/>
                                                <p className="img-item-content">{item.content}</p>
                                                <div className="user-info">
                                                    <img className="user-photo" src={item.userHeadImg}
                                                         style={{width: 26, height: 26}}></img>
                                                    <span>{item.userName}</span>
                                                </div>
                                            </div>
                                        </Touchable>
                                    )
                                }}
                            />

                            : <p>正在加载...</p>
                    }
                </div>
        )

    }
    componentDidUpdate(){
        if(this.props.flag){
            this.refs.list.scrollTo(0,0,0)
        }
    }

}

export default ImgList;